import React, {useEffect} from 'react';
// import {connect} from 'umi';
import * as echarts from "echarts";


const Index = (props) => {
  const operationObj = {};
  operationObj[props.chartId + 'Index'] = 0;
  operationObj[props.chartId + 'Interval'] = undefined;
  operationObj[props.chartId + 'Chart'] = undefined;
  const {dispatch, LeftOneList} = props;
  useEffect(() => {
    return componentWillUnmount;
  }, []);

  function componentWillUnmount() {
    if (operationObj[props.chartId + 'Interval']) {
      clearInterval(operationObj[props.chartId + 'Interval']);
    }
    if (operationObj[props.chartId + 'Chart'] && operationObj[props.chartId + 'Chart'].id) {
      operationObj[props.chartId + 'Chart'].dispose();
    }
  }

  function getChartOption(data) {
    return {
      title: {
        show: true,
        text: props.chartTitle,
        textStyle: {
          fontSize: 14,
          fontStyle: 'normal',
          fontWeight: 'normal',
          color: "#FFFFFF"
        }
      },
      grid: {
        top: '20%',
        left: '10%',
        right: '10%',
        bottom: props.bottomSize ? props.bottomSize : '10%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: "shadow"
        },
      },
      xAxis: {
        show: false,
        type: 'value'
      },
      yAxis: [{
        type: 'category',
        data: ['否', '是'],
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          },
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
      }],
      series: [{
        data: data.length === 2 ? [
          {
            value: data[1],
            itemStyle: {
              color: '#006A74'
            }
          }, {
            value: data[0],
            itemStyle: {
              color: '#00B6C2'
            }
          }] : [],
        type: 'bar',
        zlevel: 1,
        label: {
          show: true,
          position: 'right',
          color: '#fff'
        },
        barWidth: 20,
        encode: {
          x: 2,
          y: 0
        },
      }]
    }
  }

  useEffect(() => {
    // dispatch({
    //   type: props.api,
    //   payload: {},
    //   callback: (res) => {
        operationObj[props.chartId + 'Chart'] = echarts.init(document.getElementById(props.chartId));
        // if (res.errno == 0) {
          operationObj[props.chartId + 'Chart'].setOption();
          window.addEventListener('resize', () => {
            if (operationObj[props.chartId + 'Chart'] && operationObj[props.chartId + 'Chart'].id) {
              operationObj[props.chartId + 'Chart'].resize();
            }
          });
          let dataLength = 0;
          // for (true) {
          //   dataLength += 1;
          // }
          operationObj[props.chartId + 'Interval'] = setInterval(() => {
            operationObj[props.chartId + 'Chart'].dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: operationObj[props.chartId + 'Index']
            });

            operationObj[props.chartId + 'Index']++;
            if (operationObj[props.chartId + 'Index'] > dataLength) {
              operationObj[props.chartId + 'Index'] = 0;
            }
          }, 2000);
        // }
      // }
  //   })
  }, [])
  return (
    <div className="normal-box p20">
      <div id={props.chartId} style={{width: '100%', height: '100%'}}>
      </div>
    </div>
  )
}
export default Index;
